<template>
  <div class="trend-analysis-page">
    <el-card class="chart-card">
      <template #header>
        <div class="card-header">
          <span class="font-medium">趋势分析</span>
          <div>
            <el-select v-model="selectedDataType" placeholder="选择数据类型">
              <el-option
                v-for="item in dataTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="date-picker"
            />
          </div>
        </div>
      </template>
      <div ref="chartRef" class="chart"></div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let chartInstance = null

const selectedDataType = ref('option1')
const dataTypes = [
  { value: 'option1', label: '数据类型1' },
  { value: 'option2', label: '数据类型2' },
  { value: 'option3', label: '数据类型3' }
]

const dateRange = ref([])

const generateChartData = () => {
  const startDate = dateRange.value[0]
    ? new Date(dateRange.value[0]).getTime()
    : Date.now() - 30 * 24 * 3600 * 1000 // 默认过去30天
  const endDate = dateRange.value[1]
    ? new Date(dateRange.value[1]).getTime()
    : Date.now()
  const data = []
  for (let time = startDate; time <= endDate; time += 24 * 3600 * 1000) {
    data.push([new Date(time), Math.random() * 100])
  }
  return data
}

const updateChart = () => {
  if (chartInstance) {
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      xAxis: {
        type: 'time',
        boundaryGap: false,
        axisLabel: {
          formatter: '{yyyy}-{MM}-{dd}'
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: selectedDataType.value,
          data: generateChartData(),
          type: 'line',
          smooth: true,
          areaStyle: {
            opacity: 0.1,
            color: '#4834d4' // 使用主题色
          },
          lineStyle: {
            color: '#4834d4' // 使用主题色
          }
        }
      ]
    }
    chartInstance.setOption(option)
  }
}

onMounted(() => {
  nextTick(() => {
    chartInstance = echarts.init(chartRef.value)
    updateChart()

    window.addEventListener('resize', () => {
      chartInstance?.resize()
    })
  })
})

watch([selectedDataType, dateRange], () => {
  updateChart()
})
</script>

<style lang="scss" scoped>
.trend-analysis-page {
  .chart-card {
    border-radius: 8px;
    overflow: hidden;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .date-picker {
        margin-left: 20px;
      }
    }
    .chart {
      height: 400px;
      width: 100%;
    }
  }
}
</style>
